<template>
  <div class="definite">
    <u-navbar
      :is-back="true"
      :custom-back="BackM"
      title="物流详情"
      back-text=""
    >
    </u-navbar>
    <div class="status">
      <div class="status-img">
        <img src="../../../style/image/my/A28.png" alt="" />
        <div class="product">1件商品</div>
      </div>
      <div class="status-mes-one">
        <span class="status-one">物流状态：</span>
        <span class="status-two">待签收</span>
      </div>
      <div class="status-mes-two">
        <span class="status-one">物流单号：</span>
        <span class="status-one">511865987676547</span>
      </div>
    </div>
    <div class="number">
      <div class="num">8-6-3569</div>
      <div class="content">取件码</div>
    </div>
    <u-time-line style="padding: 0 1rem 1.2rem 1rem; background: #ffffff">
      <u-time-line-item nodeTop="2">
        <!-- 此处自定义了左边内容，用一个图标替代 -->
        <template v-slot:node> 
          <view class="u-node" style="background: #19be6b">
            <!-- 此处为uView的icon组件 -->
            <!-- <u-icon name="pushpin-fill" color="#fff" :size="24"></u-icon> -->
            <div style="color:#ffffff">收</div>
          </view>
        </template>
        <template v-slot:content>
          <view>
            <!-- <view class="u-order-title">待取件</view> -->
            <view class="u-order-desc"
              >【收货地址】地址地址地址地址地址地址地址地址地址
              地址地址地址地址地址地址地址地址</view
            >
            <!-- <view class="u-order-time">2018-09-19 10:12:54</view> -->
          </view>
        </template>
      </u-time-line-item>
      <u-time-line-item>
        <!-- 此处没有自定义左边的内容，会默认显示一个点 -->
        <template v-slot:content>
          <view>
            <view class="u-order-desc"
              >您的快递已暂存至深圳清湖您的快递已暂存至深圳清
              您的快递已暂存至深圳清湖您的快递已暂存至深圳清</view
            >
            <view class="u-order-time">2018-09-19 10:12:54</view>
          </view>
        </template>
      </u-time-line-item>
      <u-time-line-item>
        <!-- 此处没有自定义左边的内容，会默认显示一个点 -->
        <template v-slot:content>
          <view>
            <view class="u-order-desc desc"
              >派送中，由***17767677676正在派件</view
            >
            <view class="u-order-time time">2018-09-19 10:12:54</view>
          </view>
        </template>
      </u-time-line-item>
      <u-time-line-item>
        <!-- 此处没有自定义左边的内容，会默认显示一个点 -->
        <template v-slot:content>
          <view>
            <view class="u-order-desc desc">您的包裹已出库</view>
            <view class="u-order-time time">2018-09-19 10:12:54</view>
          </view>
        </template>
      </u-time-line-item>
      <u-time-line-item>
        <!-- 此处没有自定义左边的内容，会默认显示一个点 -->
        <template v-slot:content>
          <view>
            <view class="u-order-desc desc">您的订单等待揽收</view>
            <view class="u-order-time time">2018-09-19 10:12:54</view>
          </view>
        </template>
      </u-time-line-item>
      <u-time-line-item>
        <!-- 此处没有自定义左边的内容，会默认显示一个点 -->
        <template v-slot:content>
          <view>
            <view class="u-order-desc desc">您的订单开始处理</view>
            <!-- <view class="u-order-time">2018-09-19 10:12:54</view> -->
          </view>
        </template>
      </u-time-line-item>
      <u-time-line-item>
        <!-- 此处没有自定义左边的内容，会默认显示一个点 -->
        <template v-slot:content>
          <view>
            <view class="u-order-desc desc">商品已下单</view>
            <!-- <view class="u-order-time">2018-09-19 10:12:54</view> -->
          </view>
        </template>
      </u-time-line-item>
    </u-time-line>
  </div>
</template>

<script lang='ts' >
import { Component, Prop, Vue, Watch, Emit } from "vue-property-decorator";

@Component({
  //   @Component  是一个装修器   不可以在下面写语句
  name: "test",
})
export default class extends Vue {
  @Prop({
    type: String, // 父组件传递给子组件的数据类型
    required: false, // 是否必填
    default: " ", // 默认值， 如果传入的是 Object，则要 default: ()=>({}) 参数为函数
  })
  msg!: string;

  created() {}

  mounted() {
    //  console.log('父组件传递的参数:',this.$parent)   //暂时不考虑
    //  uni.navigateTo({
    // url: './selectBusin'
    // });
  }
}
</script>

<style scoped>
.definite {
  font-family: PingFang SC;
  height: 100%;
}
uni-page-body {
  height: 100%;
}
.status {
  padding: 0.5rem;
  background: #ffffff;
  width: 100%;
  height: 5rem;
}
.status-img {
  width: 4.3rem;
  float: left;
}
.status-img img {
  width: 3.56rem;
  height: 2.78rem;
}
.product {
  width: 3.56rem;
  height: 0.78rem;
  font-size: 0.55rem;
  text-align: center;
  background: #02af74;
  color: #ffffff;
}
.status-mes-one,
.status-mes-two {
  float: left;
  height: 0.8rem;
  line-height: 2.5rem;
  font-size: 0.75rem;
}
.status-mes-one {
  margin-bottom: 0.5rem;
}
.status-one {
  color: #000000;
}
.status-two {
  color: #02af74;
}
.number {
  padding: 1rem;
  text-align: center;
  background: #ffffff;
  border-top: 0.4rem #f3f5f3 solid;
}
.num {
  width: 7.68rem;
  height: 1.98rem;
  line-height: 1.98rem;
  margin: 0 auto;
  color: #ffffff;
  border-radius: 2rem;
  background: #02af74;
  font-size: 0.9rem;
}
.content {
  padding-top: 0.4rem;
  font-weight: 400;
  font-size: 0.6rem;
  color: #000000;
}
.desc {
  color: #000000 !important;
}
.time {
  color: #666666 !important;
}
.u-node {
  width: 44rpx;
  height: 44rpx;
  border-radius: 100rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #d0d0d0;
}
>>> .u-time-axis-node {
  left: 0;
}
>>> .u-time-axis::before {
  left: 1rem;
}
.u-order-desc,
.u-order-time {
  margin-left: 1rem;
}
.u-order-title {
  color: #333333;
  font-weight: bold;
  font-size: 32rpx;
}
.u-order-desc {
  color: rgb(150, 150, 150);
  font-size: 28rpx;
  margin-bottom: 6rpx;
}
.u-order-time {
  color: rgb(200, 200, 200);
  font-size: 26rpx;
}
</style>